import React from "react";
import { useEffect, useState } from "react";
import { getStuListApi } from "../api/stuApi";
import Alert from "./Alert";
import { useLocation, NavLink } from "react-router-dom";
function Home(props) {
  const [stuList, setStuList] = useState([]);
  const [searchItem] = useState([]);
  const [alert, setAlert] = useState(null);
  const location = useLocation();
  useEffect(() => {
    getStuListApi().then(({ data }) => {
      setStuList(data);
    });
  }, []);
  useEffect(() => {
    if (location.state) {
      setAlert(location.state);
    }
  }, [location]);
  function changeHandle() {}
  const trs = stuList.map((item, index) => {
    return (
      <tr key={index}>
        <td>{item.name}</td>
        <td>{item.age}</td>
        <td>{item.email}</td>
        <td>
          <NavLink to={`/detail/${item.id}`}>detail</NavLink>
        </td>
      </tr>
    );
  });
  const showAlert = alert ? <Alert {...alert} /> : null;
  return (
    <div>
      {showAlert}
      <h1>Student List</h1>
      <input
        type="text"
        placeholder="搜索"
        className="form-control"
        value={searchItem}
        onChange={changeHandle}
      />
      <table className="table table-striped table-bordered">
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Email</th>
            <th>Operations</th>
          </tr>
        </thead>
        <tbody>{trs}</tbody>
      </table>
    </div>
  );
}

export default Home;
